<template>
  <div style="width:100%;height:100%;background: #eeeeee;">

    <div>个人中心</div>
    <div v-if="state.username">
      <div>昵称:{{state.nickname}}</div>
      <div>用户名:{{state.username}}</div>
      <div>用户ID:{{state.userid}}</div>
      <div>登录域:{{state.domain}}</div>
      <div>头像:<img :src="state.headurl" style="width:100px;height:100px;border-radius:50px;" /></div>
      <div>
          <el-button type="primary" class="submit" @click="logout"  style="width: 200px;">
          退出
          </el-button>
      </div>
    </div>
  </div>
</template>

<script>
//import {reactive} from "vue";
import {reactive} from "vue";
import {apiUserInfo} from "../../api/api";
import {ElMessage} from "element-plus";
import { ElMessageBox } from 'element-plus';
import router from "../../router/router";
export default {
  name: "List",
  setup() {
    //保存用户数据的变量
    const state = reactive({});
    //从接口获取用户信息
    const info = async () => {
      apiUserInfo({
      }).then(res => {
        //成功
        if (res.code == 0) {
          Object.assign(state, res.data);
        }
      }).catch((error) => {
        console.log(error)
      })
    };
    info();


    const logoutLocal = () => {
      //删除本地用户信息
      //delUser();
      localStorage.removeItem('token');
      //跳转
      router.push({
        path: "/home/home",
      });
    };
    //const { ctx } = getCurrentInstance();
    const logout = () => {
      //ctx.$confirm
      ElMessageBox.confirm("确定要退出系统吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(async () => {

            console.log("del param:");
            //console.log(row);
                  ElMessage.success("退出成功!");
                  logoutLocal();
          })
          .catch(() => {
            /*
            ctx.$message({
              type: "info",
              message: "已取消退出",
            });

             */
            ElMessage.info("已取消退出");
          });
    };


    return {
      info,
      state,
      logout,
    };
  }
}
</script>

<style scoped>

</style>
